<template>
  <div class="home">
    <Nav title="购物车" router="/user"></Nav>
    <div class="header_login">
      <div class="left">登录后享受更多优惠</div>
      <div class="right" @click="toLogin">
        去登录
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="tip">
      <div class="txt">购物车还是空的</div>
      <button @click="toHome">去逛逛</button>
    </div>
    <div class="like">
      <img src="@/assets/images/Cart/like.jpg" />
    </div>
    <div class="goods">
      <van-grid :border="false" :center="false" :column-num="2">
        <van-grid-item v-for="(goods, index) in goodsInfo" :key="index">
          <van-image lazy-load :src="goods.url" />
          <div class="title">{{goods.title}}</div>
          <div class="price">
            ￥{{goods.price}}
            <s>{{goods.oldPrice ? goods.oldPrice : ''}}</s>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import Nav from '@/components/Nav/Nav.vue'

export default {
  components: {
    Nav
  },
  data() {
    return {
      goodsInfo: [
        {
          url: require('@/assets/images/Cart/goods01.jpg'),
          title: '米家驱蚊器 智能版',
          price: 59
        },
        {
          url: require('@/assets/images/Cart/goods02.jpg'),
          title: '米家直流变频落地扇1X',
          price: 299
        },
        {
          url: require('@/assets/images/Cart/goods03.jpg'),
          title: '手机USB micro 数据线  ',
          price: 9.9
        },
        {
          url: require('@/assets/images/Cart/goods04.jpg'),
          title: 'Redmi Note 8 Pro 6GB+64GB',
          price: 1199,
          oldPrice: 1399
        },
        {
          url: require('@/assets/images/Cart/goods05.jpg'),
          title: 'Redmi Note 8 6GB+64GB',
          price: 999,
          oldPrice: 1199
        },
        {
          url: require('@/assets/images/Cart/goods06.jpg'),
          title: '米家 IH 电饭煲 4L',
          price: 499,
          oldPrice: 599
        },
        {
          url: require('@/assets/images/Cart/goods07.jpg'),
          title: 'Redmi 7A 3GB+32GB',
          price: 549,
          oldPrice: 799
        },
        {
          url: require('@/assets/images/Cart/goods08.jpg'),
          title: '电视4A 50" 影院版',
          price: 1898,
          oldPrice: 2098
        },
        {
          url: require('@/assets/images/Cart/goods09.jpg'),
          title: '米家电饭煲4L',
          price: 299
        },
        {
          url: require('@/assets/images/Cart/goods10.jpg'),
          title: '8H多功能青春床垫X1',
          price: 399
        },
        {
          url: require('@/assets/images/Cart/goods11.jpg'),
          title: '米家洗烘一体机Pro',
          price: 2999
        },
        {
          url: require('@/assets/images/Cart/goods12.jpg'),
          title: '米家照片打印机',
          price: 499
        },
        {
          url: require('@/assets/images/Cart/goods13.jpg'),
          title: '小米巨能写中性笔10支装',
          price: 9.99
        },
        {
          url: require('@/assets/images/Cart/goods14.jpg'),
          title: '米家互联网燃气灶',
          price: 799
        },
        {
          url: require('@/assets/images/Cart/goods15.jpg'),
          title: '知吾煮汤锅 米家定制',
          price: 99
        },
        {
          url: require('@/assets/images/Cart/goods16.jpg'),
          title: '米家电子温湿度计Pro',
          price: 79
        },
        {
          url: require('@/assets/images/Cart/goods17.jpg'),
          title: '小米活塞耳机',
          price: 29
        },
        {
          url: require('@/assets/images/Cart/goods18.jpg'),
          title: '照片打印机彩色相纸',
          price: 59
        },
        {
          url: require('@/assets/images/Cart/goods19.jpg'),
          title: '小米电视音响',
          price: 399
        },
        {
          url: require('@/assets/images/Cart/goods20.jpg'),
          title: '智睿LED灯泡 米家定制',
          price: 14.9
        }
      ]
    }
  },
  methods: {
    toHome() {
      this.$router.push('/home')
    },
    toLogin() {
      this.$router.push('/login')
    }
  }
}
</script>
<style scoped>
.header_login {
  margin-top: 2rem;
  background-color: #fff;
  height: 2rem;
  font-size: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_login .left {
  margin-left: 0.5rem;
}
.header_login .right {
  color: #757575;
  font-size: 0.45rem;
  margin-right: 0.5rem;
  display: flex;
}
.header_login .right .van-icon {
  font-size: 0.7rem;
  color: #757575;
}
.tip {
  background: url('../../assets/images/Cart/bg.jpg') no-repeat;
  background-size: 2rem;
  background-position: 1.5rem 0.2rem;
  background-color: #ebebeb;
  height: 2.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tip .txt {
  color: #ababab;
  font-size: 0.5rem;
  margin-right: 0.3rem;
}
.tip button {
  width: 2.5rem;
  height: 1rem;
  font-size: 0.5rem;
  border: 0.01rem solid #c8c8c8;
}
.goods {
  padding-bottom: 3rem;
  background: #fff;
}
.goods .title {
  margin-top: 0.2rem;
  margin-left: 0.2rem;
  font-size: 0.55rem;
  width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goods .price {
  color: #ff6700;
  font-size: 0.6rem;
  margin-left: 0.2rem;
}
.goods .price s {
  font-size: 0.45rem;
  color: rgba(0, 0, 0, 0.54);
}
</style>
